<template>
	<view class="container">
		<view class="address">
			<view class="address-item" v-for="(item, index) in addressList" :key="index">
				<view class="item-left" @click="selectAddress(item.id)">
					<uni-icons v-if="item.is_default==1" type="checkbox" color="#d78219" size="25" class="icon"></uni-icons>
					<uni-icons v-else type="circle" color="#eee" size="25" class="icon"></uni-icons>
					<view class="address-content">
						<view class="detail">{{item.receiver_province}} {{item.receiver_city}} {{item.receiver_district}} {{item.receiver_address}}</view>
						<view class="contact">
							<text class="name">{{item.receiver_name}}</text>
							<text>{{item.receiver_mobile}}</text>
						</view>
					</view>
				</view>
				<uni-icons type="compose" size="25" class="icon" @click="editAddress(item)"></uni-icons>
			</view>
		</view>

		<view class="button-box">
			<view class="button" @click="addAddress">
				<view class="button-left">
					<uni-icons type="plus-filled" color="#d78219" size="26"></uni-icons>
					<text class="button-text">新增收货地址</text>
				</view>
				<uni-icons type="arrowright"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Celebrity
	} from '@/models/celebrity.js'
	const celebrityModel = new Celebrity()
	export default {
		data() {
			return {
				addressList: [],
				celebirtyId: uni.getStorageSync('celebrity_id')
			}
		},
		methods: {
			_loadData() {
				celebrityModel.getAddressList(this.celebirtyId, (res) => {
					this.addressList = res
				})
			},
			editAddress(item) {
				uni.setStorageSync('edit_address', item)
				uni.navigateTo({
					url: '/pages/address/address?id=' + item.id
				})
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			selectAddress(id) {
				celebrityModel.setDefaultAddress(this.celebirtyId, id, (res) => {
					uni.navigateBack({})
				})
			}
		},
		onShow() {
			this._loadData()
		}
	}
</script>

<style>
	.address {
		width: 100%;
		padding-bottom: 100rpx;
	}

	.address-item {
		width: 710rpx;
		margin: 0 auto;
		padding: 20rpx 0;
		font-size: 24rpx;
		line-height: 50rpx;
		color: #999;
		border-bottom: 1rpx solid #e9e9e9;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.item-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.icon {
		padding: 20rpx;
	}

	.address-content {
		display: flex;
		flex-direction: column;
	}

	.location {
		font-size: 26rpx;
		color: #333;
	}

	.detail {
		color: #666;
	}

	.name {
		margin-right: 30rpx;
	}

	.button-box {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 20rpx;
		border-top: 2rpx solid #e9e9e9;
		background-color: #f5f8f5;
	}

	.button {
		width: 710rpx;
		margin: 0 auto;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.button-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.button-text {
		margin-left: 20rpx;
	}
</style>
